import React from 'react';
import { Input, Select, DatePicker } from 'antd';
import axios from 'axios';
import { apiPrefix } from 'shared/api';
import AlerModule from 'shared/AlertModule';
import './index.less';

const { Option } = Select;

export default class CertificateManageForm extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      users: [],
      CertificateTypes: [],
      newCertificateManage: {},
      visible: false,
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/unirole/users`;
    const api2 = `${apiPrefix}api/v1/certificate/types`;
    axios.get(api)
      .then((response) => {
        this.setState({ users: response.data.data });
      });
    axios.get(api2)
      .then((response) => {
        this.setState({ CertificateTypes: response.data.data });
      });
    if (this.props.match.params.id !== undefined) {
      const api = '';
      axios.get(api)
        .then((response) => {
          this.setState({ newCertificateManage: response.data.data });
        });
    }
  }

  handlOnChange=(value, key) => {
    const { newCertificateManage } = this.state;
    newCertificateManage[key] = value;
    console.log(newCertificateManage);
    this.setState({ newCertificateManage: { ...this.state.newCertificateManage }, change: true });
  }
  redirectToCertificateManage() {
    this.props.history.push('/Certificate/CertificateManage');
  }
  showAlertModule=() => {
    if (this.state.change === true) {
      this.setState({ visible: true });
    } else {
      this.redirectToCertificateManage();
    }
  }
  closeAlertModule=() => {
    this.setState({ visible: false });
  }
  historyPush=() => {
    this.redirectToCertificateManage();
    this.setState({ visible: false });
  }
  sureAdd=() => {
    const api = `${apiPrefix}api/v1/certificate/certificate`;
    const { newCertificateManage } = this.state;
    axios.post(api, newCertificateManage)
      .then((response) => {
        console.log(response);
        if (response.status === 200) {
          this.redirectToCertificateManage();
        }
      });
  }
  render() {
    const id = this.props.match.params.id;
    const { newCertificateManage, visible, CertificateTypes, users } = this.state;
    return (
      <div className="mian-body">
        <div>
          <h3>{id ? '证书管理' : '登记新证书'}</h3>
        </div>
        <div className="body-input">
          <div>
            <span>选择人员</span>
            <Select
              showSearch
              style={{ width: 300 }}
              placeholder="选择人员"
              onChange={value => this.handlOnChange(value, 'name')}
              optionFilterProp="children"
              filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
              {
                users.map((value, index) => (
                  <Option value={value.id} key={index}>{value.name}</Option>
              ))
              }
            </Select>
          </div>
          <div>
            <span>选择证书</span>
            <Select
              showSearch
              style={{ width: 300 }}
              placeholder="选择证书"
              onChange={value => this.handlOnChange(value, 'type_id')}
              optionFilterProp="children"
              filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
              {
                CertificateTypes.map((value, index) => (
                  <Option value={value.id} key={index}>{value.fullname}</Option>
              ))
              }
            </Select>
          </div>
          <div>
            <span>证书编号</span>
            <Input
              value={newCertificateManage.number || ''}
              onChange={e => this.handlOnChange(e.target.value, 'number')}
              style={{ width: 300 }}
              placeholder="请输入证书名称"
            />
          </div>
          <div>
            <span>选择领证时间</span>
            <DatePicker
              style={{ width: 300, marginLeft: 20 }}
              placeholder="领证时间"
              onChange={value => this.handlOnChange(value, 'mfd_date')}
            />
          </div>
          <div className="certificate-button">
            <button onClick={this.sureAdd} className="sure-button">确定</button>
            <button onClick={this.showAlertModule} className="cancel-button">取消</button>
          </div>
          <AlerModule
            visible={visible}
            onCancel={this.closeAlertModule}
            onOk={this.historyPush}
          />
        </div>
      </div>
    );
  }
}
